<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
    <script type="text/javascript" src='leaflet.ChineseTmsProviders.js'></script>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'></div>
</body>

<script>
    // layers
    var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', { maxZoom: 18, minZoom: 5 });
    var satelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: 18, minZoom: 5 });
    var routeMap = L.tileLayer.chinaProvider('Google.Satellite.Annotion', { maxZoom: 18, minZoom: 5 });
    var baseLayers = {
        "地图": normalMap,
        "影像": satelliteMap,
        "标注": routeMap
    };
    var overlayLayers = {};

    // map
    var map = L.map("map", {
        center: [31.59, 120.29],
        zoom: 12,
        layers: [normalMap],
        zoomControl: false
    });

    // controls
    L.control.layers(baseLayers, overlayLayers).addTo(map);
    L.control.zoom({
        zoomInTitle: '放大',
        zoomOutTitle: '缩小'
    }).addTo(map);
</script>

</html>
